<template>
  <div class="activeData">
    <h3>实时统计</h3>
    <div class="couponTit">活动名称：{{ activityName }}</div>
    <div class="dataListBox">
      <div class="dataItem">
        <span>{{ dataInfo.orders }}</span>
        <p>成交笔数</p>
      </div>
      <div class="dataItem">
        <span>{{ dataInfo.users }}</span>
        <p>成交人数</p>
      </div>
      <div class="dataItem">
        <span>{{ dataInfo.total }}</span>
        <p>成交金额</p>
      </div>
    </div>
    <div class="tabListInfo">活动成交的商品</div>
    <div class="tableBox">
      <el-table
        :data="dataInfo.datas.list"
        v-loading="tableLoading"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="600"
      >
        <el-table-column prop="productId" label="商品id" />
        <el-table-column label="商品主图">
          <template #default="scope">
            <img height="80" width="80" :src="scope.row.image" alt srcset />
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="sectionPrice" label="活动价" />
        <el-table-column prop="stockNumber" label="库存" />
        <el-table-column prop="valume" label="活动销量" />
        <el-table-column prop="total" label="活动成交金额" />
        <el-table-column prop="number" label="商品限量（件）" />
      </el-table>
      <div class="fenye">
        <el-pagination
          v-model:current-page="searchForm.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getShopId } from '@/utils/auth'
import { getDatas } from '@/api/active'

const props = defineProps({
  form: {
    type: Object,
    default: () => ({})
  }
})
const searchForm = ref({
  page: 1,
  pageSize: 10,
  signType: 2,
  shopId: getShopId()
})
const tableLoading = ref(false)
const activityName = ref('')
const total = ref(0)
const dataInfo = ref({
  datas: {}
})

// 初始化查询所有数据
const getAll = async () => {
  try {
    tableLoading.value = true
    const res = await getDatas(searchForm.value)
    dataInfo.value = res.data
    total.value = res.data.datas.total
  } finally {
    tableLoading.value = false
  }
}
const handleSizeChange = (val) => {
  searchForm.value.pageSize = val
  getAll()
}
const handleCurrentChange = (val) => {
  searchForm.value.page = val
  getAll()
}

watch(() => props.form, (newVal, oldVal) => {
  searchForm.value.activityId = newVal.activityId
  searchForm.value.signId = newVal.signId
  activityName.value = newVal.activityName
  getAll()
}, { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.activeData {
  padding: 20px;
  .couponTit {
    margin: 20px 0;
  }
  .dataListBox {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    .dataItem {
      width: 220px;
      height: 120px;
      border-radius: 8px;
      border: 1px solid #999999;
      text-align: center;
      margin: 0 10px;
      span {
        display: block;
        margin-top: 35px;
      }
    }
  }
  .tabListInfo {
    margin: 20px 0;
  }
}
</style>
